<template>
  <div>
    <transition name="fade">
      <router-view/>
    </transition>
    <div class="mint-tabbar is-fixed footer-nav">
        <router-link to="/" class="mint-tab-item" :class="{'is-selected':$route.path=='/'}">
          <div class="mint-tab-item-icon">
            <img src="./assets/eye.png" v-if="!active('/')">
            <img src="./assets/eye_1.png" v-if="active('/')">
          </div>
          <div class="mint-tab-item-label">看展</div>
        </router-link>
        <router-link to="/points" class="mint-tab-item" :class="{'is-selected':$route.path=='/points'}">
          <div class="mint-tab-item-icon">
            <img src="./assets/points.png" v-if="!active('/points')">
            <img src="./assets/points_1.png" v-if="active('/points')">
          </div>
          <div class="mint-tab-item-label">艺点</div>
        </router-link>
        <router-link to="/about" class="mint-tab-item" :class="{'is-selected':$route.path=='/about'}">
          <div class="mint-tab-item-icon">
            <img src="./assets/about.png" v-if="!active('/about')">
            <img src="./assets/about_1.png" v-if="active('/about')">
          </div>
          <div class="mint-tab-item-label">关于</div>
        </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    active (path) {
      if (this.$route.path === path) {
        return true
      } else {
        return false
      }
    }
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
.footer-nav {
  background-color: rgba(0,0,0,0.05);
  .mint-tab-item {
    color: #f5fafc;
    &:active {
      background-color: transparent;
    }
    &.is-selected {
      color: #f5fafc;
      background-color: transparent;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
